<template>
  <div class="container">
    <el-dialog title="查看商品" width="70%" :visible.sync="option.show" @open="getData" center>
      <el-table :data="tableData" border style="width: 100%" empty-text="暂无数据">
        <el-table-column prop="productcode" label="商品code" align="center"></el-table-column>
        <el-table-column prop="productname" label="商品名称" align="center"></el-table-column>
        <el-table-column prop="unit" label="分类名称" align="center"></el-table-column>
        <el-table-column prop="qty" label="要货数量" align="center"></el-table-column>
        <el-table-column prop="stock" label="库存" align="center"></el-table-column>
        <el-table-column prop="freeze_num" label="冻结数量" align="center"></el-table-column>
        <el-table-column prop="delivery_num" label="可配货数量" align="center"></el-table-column>
        <el-table-column prop="pick_qty" label="配货数量" align="center" width="140">
          <template slot-scope="scope">
              <el-input v-model="scope.row.pick_qty" type="number" :step="0.0001" placeholder="请输入配货数量"  @input="edit(scope.row, scope.$index)"></el-input>
          </template>
        </el-table-column>
        <el-table-column prop="goods_price" label="价格" align="center" width="140">
          <template slot-scope="scope">
              <el-input v-model="scope.row.goods_price" type="number" :step="0.0001" placeholder="请输入价格"  @input="input(scope.row)"></el-input>
          </template>
        </el-table-column>
         <el-table-column  label="加价率" align="center">
          <template slot-scope="scope">
            <span>{{scope.row.markup}}%</span>
          </template>
        </el-table-column>
        <el-table-column prop="total_price" label="总价" align="center"></el-table-column>
        <el-table-column prop="price" label="操作" align="center" width="100px">
          <template slot-scope="scope">
            <!-- <div style="margin-bottom:5px">
                <el-button type="primary" size="mini" @click="edit(scope.row)">编辑数量</el-button>
            </div> -->
            <div>
                <el-button type="primary" size="mini" @click="openPc(scope.row, scope.$index)">选择批次</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>

      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="confirm" v-if="option.status!=3">保 存</el-button>
        <el-button type="primary" @click="option.show = false">关 闭</el-button>
      </div>
    </el-dialog>



    <el-dialog title="配货" :visible.sync="pcShow" center>
      <el-table ref="multipleTable" :data="tableData1" border style="width: 100%" empty-text="暂无数据" @selection-change="handleSelectionChange">
        <el-table-column type="selection" align="center" width="55"></el-table-column>
        <el-table-column prop="id" label="批次号" align="center"></el-table-column>
        <el-table-column prop="goods_price" label="价格" align="center"></el-table-column>
        <el-table-column prop="markup" label="加价率" align="center"></el-table-column>
        <el-table-column prop="stock" label="剩余数量" align="center"></el-table-column>
        <el-table-column prop="freeze_num" label="冻结数量" align="center"></el-table-column>
        <el-table-column prop="pick_qty" label="配送数量" align="center" width="140">
          <template slot-scope="scope">
              <el-input type="number" v-model="scope.row.pick_qty" :step="0.0001" :max="Number(scope.row.stock) - Number(scope.row.freeze_num)" placeholder="请输入配货数量"  @input="pdPickQty(scope.row)"></el-input>
          </template>
        </el-table-column>
        <el-table-column prop="show_goods_price" label="出货价格" align="center" width="140">
          <template slot-scope="scope">
              <el-input type="number" v-model="scope.row.show_goods_price" :step="0.0001" placeholder="请输入出货价格" ></el-input>
          </template>
        </el-table-column>
      </el-table>

      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="confirmPc">确 定</el-button>
        <el-button type="primary" @click="pcShow = false">关 闭</el-button>
      </div>
    </el-dialog>
    

  </div>
</template>
<script>
import { findDelivery, selectGoodsDetailsList, editDelivery, saveDelivery } from "@/api/delivery/deliveryList";
import { debounce } from "@/utils/index";

export default {
  props: {
    option: Object
  },
  data() {
    return {
      tableData: [],
      tableData1: [],
      multipleSelection:[],
      pcShow: false,
      index: '',
      isPc: {},
      timer:null
    };
  },
  methods: {
    confirm() {
      let data = {
        id: this.option.id,
        goods_json: []
        // goods_json: this.tableData
      };
      let num = 0;
      this.tableData.forEach(el => {
        if (!(el.pick_qty+'') || !(el.goods_price+'')) {
          num++;
        }
        data.goods_json.push({
            id: el.id,
            productcode: el.productcode,
            pick_qty: el.pick_qty,
            goods_price: el.goods_price,
            total_price: el.total_price,
            delivery_info: el.delivery_info
        })
      });
      if (num) {
         this.$message({
              type: "error",
              message: '需要填写信息'
          });
        return
      }
      data.goods_json = JSON.stringify(data.goods_json);
      saveDelivery(data).then(res => {
        if (res.code == 0) {
          this.$message({
              type: "success",
              message: res.msg
          });
          this.$emit('refresh', true);
          this.option.show = false;
        }
      });
    },
    getData() {
      this.isPc = {}
      const data = {
        id: this.option.id
      };
      findDelivery(data).then(res => {
        if (res.code == 0) {
          this.tableData = res.data.info.orderGoods;
        }
      });
    },
    input(obj) {
      obj.total_price = Number(obj.pick_qty * obj.goods_price).toFixed(4);
      obj.delivery_info.forEach(el => {
        el.goods_price = obj.goods_price;
      });
    },
    openPc(obj, index){
      this.index = index;
      this.pcShow = true;
      // if (this.isPc[this.index]) {
      //   return;
      // }
      const data = {
        eogid: obj.id,
        erp_code: obj.productcode,
        limit: 0,
      };
      this.multipleSelection = []
      selectGoodsDetailsList(data).then(res => {
        if (res.code == 0) {
          this.tableData1 = res.data.data;
          this.$nextTick(res=>{
              this.tableData[this.index].delivery_info.forEach((item,index)=>{//选中数据
                  this.tableData1.forEach((listItem,listIndex)=>{ //配件列表所有数据
                    if(item.gd_id == listItem.id){
                      this.$refs.multipleTable.toggleRowSelection(listItem, true);
                      listItem.pick_qty = item.freeze_num;
                      listItem.show_goods_price = item.goods_price;
                    } else {
                      // listItem.pick_qty = 0;
                      // listItem.show_goods_price = 0;
                    }
                  })
              })
          })
        }
      });
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    edit(obj,index) {
      if (obj.pick_qty == '') {
        return
      }
      if (this.timer) {
        clearTimeout(this.timer)
      }
      this.timer = setTimeout(() => {
        this.isPc[index] = false;
        const data = {
          eogid: obj.id,
          pick_qty: obj.pick_qty
        }
        editDelivery(data).then(res=>{
          if (res.code == 0) {
            this.$message({
                type: "success",
                message: res.msg
            });
            obj.pick_qty = res.data.info.pick_qty;
            obj.goods_price = res.data.info.goods_price;
            obj.total_price = res.data.info.total_price;
            obj.delivery_info = res.data.info.delivery_info;
          }
        }, err=>{
          obj.pick_qty = err.data.info.pick_qty;
        })
      }, 1000)
    },
    confirmPc() {
      if (this.multipleSelection.length) {
        this.isPc[this.index] = true;
        // this.tableData[this.index].delivery_info = this.multipleSelection;
        this.tableData[this.index].delivery_info = [];
        let pick_qty = 0;
        let total_price = 0;
        this.multipleSelection.forEach(el => {
          pick_qty += Number(el.pick_qty);
          total_price += Number(el.pick_qty) * Number(el.show_goods_price);
          this.tableData[this.index].delivery_info.push({
            "gd_id": el.id,
            "freeze_num": el.pick_qty,
            "goods_price": el.show_goods_price,
            "goods_id": el.goods_id
          })
        });
        this.tableData[this.index].pick_qty = pick_qty;
        this.tableData[this.index].goods_price = (total_price / pick_qty).toFixed(4);
        this.tableData[this.index].total_price = total_price.toFixed(4);
      }
      this.pcShow = false;
    },
    pdPickQty(obj) {
      const max = Number(obj.stock) - Number(obj.freeze_num); 
      if (Number(obj.pick_qty) > max) {
        // this.$message({
        //     type: "error",
        //     message: '数量不能大于'+max
        // });
        obj.pick_qty = max
      }
    }
  }
}
</script>
<style scoped>
.pagination {
  text-align: right;
  padding: 10px;
}
</style>